<template>
  <div class="contain" :style="style">
    <text style="font-size: 30px" :style="item.style" v-for="item in templateArr" v-if="!item.img">
      {{item.content}}
    </text>
    <image resize="cover" v-else :style="item.img.style" :src="item.img.src"></image>
  </div>
</template>

<script>
export default {
  props: {
    inner: {
      default: ""
    },
    style: {
      width: '750px',
    }
  },
  computed: {
    templateArr: function() {
      return this.transform(this.inner);
    }
  },
  methods: {
    transform: function (html){
      var arr = html.match(/<p.*?>(.*?)<.*?\/p>/g);
      if (!arr || !arr.length) return;
      var templateArr = [];
      for (var i = 0; i < arr.length; i++) {
        var obj = {
          content: '',
          style: {},
          img: false
        };
        //处理外层p的align
        if(/<p.*align="(\w+)".*>/.test(arr[i])) {
          obj.style.textAlign = /<p.*?align="(\w+)".*?>/.exec(arr[i])[1];
        }
        var inner = /<p.*?>(.*)<\/p>/.exec(arr[i])[1];
        if (!inner.length) continue;
        if(/<img.*?\/>/.test(inner)) {
          //处理图
          obj.img = true;
          obj.img = {
            style: /style="(.+?)"/.exec(inner)[1],
            src: /src="(.+?)"/.exec(inner)[1]
          };
        }
        else {
          if (/<strong.*?>(.*)<\/strong>/.test(inner)){
            obj.style.fontWeight = 'bold';
            obj.content = contentHandler(/<strong.*?>(.*)<\/strong>/.exec(inner)[1]);
          } else {
            obj.content = contentHandler(inner);
          }
        }
        templateArr.push(obj);
      }
      return templateArr;
      function contentHandler(str) {
        var str2 = str.replace(/&nbsp;/g, '');
        return str2.replace(/<.*?>/g, '');
      }
    }
  }
}
</script>
<style scoped>
.contain{
  padding-left: 20px;
  padding-right: 20px;
}

</style>
